<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>Vue笔记（1） | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="
要画高可用原型，顺便学了vue，3.0也出了，现在正在用MyAppBox练手，感觉还挺快，这里记录下，省着忘；









1. 环境
2. Vue.Router 路由









开源地址

1. 环境

node.js
v..." />
    <meta name="keywords" content="Vue笔记" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">Vue笔记（1）</h2>
            <div class="post-date">2020-04-23
            
                
                  <a href="https://shixixiyue.gitee.io/tag/TyVX6hfCJ/" class="tag">
                    Vue笔记
                  </a>
                
            </div>
            
            <div class="post-content" v-pre>
              <blockquote>
<p>要画高可用原型，顺便学了vue，3.0也出了，现在正在用MyAppBox练手，感觉还挺快，这里记录下，省着忘；</p>
</blockquote>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#1-%E7%8E%AF%E5%A2%83">1. 环境</a></li>
<li><a href="#2-vuerouter-%E8%B7%AF%E7%94%B1">2. Vue.Router 路由</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<blockquote>
<p><a href="https://gitee.com/shixixiyue/VueAppBox">开源地址</a></p>
</blockquote>
<h4 id="1-环境">1. 环境</h4>
<ul>
<li>node.js</li>
<li>vue-cli</li>
<li>.net core</li>
<li>mysql</li>
</ul>
<p>node.js我也没学过，vue架子安装网上都有教，随便找的；.net core用的webapi做后台，我没用过正好试一试...</p>
<p>vue ui这东西可不错，装了element-ui、echarts等插件</p>
<p><em><strong>首先建项目</strong></em>，VS2017建的 .net core MVC项目 底层代码还是沾过来的，直接就能用（而且有SQLServer类了）；再建一个 基于Vue.js Web应用程序，这样他俩就在一个解决方案下了，</p>
<figure data-type="image" tabindex="1"><img src="https://shixixiyue.gitee.io//post-images/1684482594606.png" alt="解决方案" loading="lazy"></figure>
<p>vue项目发布路径指到 .net core下的 wwwroot 里，然后将启动页面改喽，这样启动AppServer就能运行了</p>
<figure data-type="image" tabindex="2"><img src="https://shixixiyue.gitee.io//post-images/1684482614975.png" alt="路径" loading="lazy"></figure>
<figure data-type="image" tabindex="3"><img src="https://shixixiyue.gitee.io//post-images/1684482620593.png" alt="启动" loading="lazy"></figure>
<p><em><strong>其次是通讯</strong></em>，vue 用 axios.post 提交，webapi 接收，.net core的Controlle只能接收一个post，多个的话还得再分一层，干脆把功能标识放到参数里，另外时间戳和token也是必要的，token涉及到了拦截器（不能每个类都判断一遍token），我之前写过，拿过来改改就能用，这样提交格式就固定了，返回统一使用MsReturned类，我自己写的，</p>
<pre><code>{
    Action: &quot;Get&quot;, //动作标识
    data: {}, //提交的数据
    MenuId: &quot;-1&quot; //菜单ID 判断权限用
    jsTimeStamp: '' //时间戳
}
//token在config.headers[&quot;Authorization&quot;]里
</code></pre>
<p>后台用OnActionExecuting拦截</p>
<pre><code>public override void OnActionExecuting(ActionExecutingContext filterContext)
{
    //这里token我直接存的用户实体的json 加密后的，所以很长~
    string Token = filterContext.HttpContext.Request.Headers[&quot;Authorization&quot;];
}
</code></pre>
<p>还有个方法是得到请求字符串（文件上传的还没试过）</p>
<pre><code>/// &lt;summary&gt;
///  根据请求信息返回请求串
/// &lt;/summary&gt;
/// &lt;param name=&quot;request&quot;&gt;请求信息&lt;/param&gt;
/// &lt;returns&gt;请求串&lt;/returns&gt;
public static string QueryString(HttpRequest request)
{
    string text = &quot;&quot;;
    using (var ms = new MemoryStream())
    {
        request.Body.Seek(0, 0);
        request.Body.CopyTo(ms);
        var b = ms.ToArray();
        var postParamsString = Encoding.UTF8.GetString(b);
        text = postParamsString.ToString();
    }
    return text;
}
</code></pre>
<blockquote></blockquote>
<pre><code>public override void OnActionExecuting(ActionExecutingContext filterContext)
{
    //得到Token
    string Token = filterContext.HttpContext.Request.Headers[&quot;Authorization&quot;];
    //得到请求路径
    string path = filterContext.HttpContext.Request.Path;
    //得到请求参数
    string body = QueryString(filterContext.HttpContext.Request);
    //任何页面都判断body 转json 和 Action MenuId 字段是否存在 
    //   如果错误返回&quot;参数错误&quot; code 5001
    //判断Token
    //  如果是登录页面，就不判断Token了
    //  非登录页，Token转用户 和 MenuId比对（MenuId=-1就不对比了），
    //    如果用户错误 返回&quot; 重新登录 &quot; code 5002
    //    如果没权限 返回&quot; 访问权限错误 &quot; code 5003
}
</code></pre>
<p>axios的用法和配置网上都有，我又包了一层，适合我的项目</p>
<pre><code>/**
 * @description 提交
 * @param {String} url 地址 会自动拼接 /api/
 * @param {String} Action 请求事件名 默认是Get 参数 默认为{}
 * @param {Object} data 传递的参数 默认为{}
 * @return {Object} 返回结果
 */
export default async (url = &quot;&quot;, Action = &quot;Get&quot;, data = {}, MenuId = &quot;-1&quot;) =&gt; {
  let jsTimeStamp = new Date().getTime();
  //得到当前路由的菜单ID
  if (_this &amp;&amp; _this.$route.meta.activeMenu) {
    MenuId = _this.$route.meta.activeMenu;
  }
  //提交的参数
  let opt = { Action, data, MenuId, jsTimeStamp };
  // console.log(&quot;发送消息:&quot; + url);
  // console.log(&quot;发送消息:&quot; + JSON.stringify(opt));
  return service
    .post(`/api/${url}`, opt)
    .then(res =&gt; {
      // console.log(&quot;返回消息:&quot; + JSON.stringify(res));
      return res;
    })
    .catch(err =&gt; {
      console.error(&quot;返回出错:&quot; + err);
      return err;
    });
}
</code></pre>
<p>Controller中接收</p>
<pre><code>[SysPageFilte]
public class System1Controller : SysControllerBase
{
    // 用户类
    // POST: api/System1
    [HttpPost]
    public ActionResult&lt;string&gt; Post([FromBody] dynamic data)
    {
        string jsTimeStamp = data.jsTimeStamp;
        string Action = data.Action == null ? &quot;Get&quot; : data.Action;
        return &quot;&quot;;
    }
}
</code></pre>
<p>在vue中创建api文件夹，文件名和Controller类名一致（其实也是表名，也是实体名）</p>
<figure data-type="image" tabindex="4"><img src="https://shixixiyue.gitee.io//post-images/1684482646120.png" alt="用户类" loading="lazy"></figure>
<blockquote></blockquote>
<pre><code>import server from &quot;@/utils/axios.js&quot;;
/**
 * @description 用户类
 */
export default class System1 {
  constructor() {}
  /**
   * @description 得到用户List
   */
  static async get() {
    //this.name就是类名 就是System1
    let result = await server(this.name);
    return result;
  }
}
</code></pre>
<p>vue中用的时候就是</p>
<pre><code>import { System1 } from &quot;@/api&quot;;
...
async initPage() {
    this.sys1Data = await System1.get();
}
</code></pre>
<p>至此通讯就打通了，剩下就是撸代码了，</p>
<h4 id="2-vuerouter-路由">2. Vue.Router 路由</h4>
<p>路由挺闹心，涉及子路由，动态路由，跳转，传参，拦截</p>
<p>但是网上也都有，没什么难度，这里主要记一下，我架子上定义了页面路径，在项目里叫功能（功能有地址，菜单没地址），这个地址传过来之后都作为子路由，上级是登录和框架 固定的路由，子路由在框架下，这里用到了node.js的方法，判断文件是否存在，如果不存在则不创建路由</p>
<pre><code>const modulesFiles = require.context(&quot;../../view&quot;, true);
if(modulesFiles.keys().includes(&quot;./&quot; + item.url))
</code></pre>
<p>还有一个懒加载页面，网上抄的</p>
<pre><code>//懒加载页面
export default vuename =&gt; () =&gt; import(`@/view/${vuename}`);
</code></pre>
<p>先记这么多，下次记录封装个 dialog selectTree</p>
<figure data-type="image" tabindex="5"><img src="https://shixixiyue.gitee.io//post-images/1684482662408.png" alt="功能" loading="lazy"></figure>
<figure data-type="image" tabindex="6"><img src="https://shixixiyue.gitee.io//post-images/1684482669222.png" alt="字典" loading="lazy"></figure>
<figure data-type="image" tabindex="7"><img src="https://shixixiyue.gitee.io//post-images/1684482676406.png" alt="角色" loading="lazy"></figure>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/TyVX6hfCJ/" class="tag">
                    Vue笔记
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/du-shu-zhai-yao-yi/">
                  <h3 class="post-title">
                    读书摘要（一）
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
